<template>
	<view>
		<u-navbar :is-back="true" :title="navbar.title" :background="navbar.background">
		</u-navbar>
		<view class="u-page">
			<view class="wrap">
				<u-form label-width="150">
					<u-form-item label="用户名" prop="userLoginName">
						<u-input ref="userLoginName" v-model="userInfo.userLoginName" type="text"></u-input>
					</u-form-item>
					<u-form-item label="密码" prop="userPassword">
						<u-input v-model="userInfo.userPassword" type="password" placeholder="请输入密码"></u-input>
					</u-form-item>
					<u-form-item label="姓名" prop="userName">
						<u-input v-model="userInfo.userName" type="text" placeholder="姓名"></u-input>
					</u-form-item>
					<u-form-item label="所属部门" prop="departmentCodes" @tap="cascaderClick">
						<u-input disabled v-model="userInfo.departmentNames" type="text" placeholder="所属部门"
							@click="cascaderClick"></u-input>
						<cascader ref="cascader" :selectValue="userInfo.departmentCodes" labelName="departmentName"
							valueName="departmentCode" :cascaderData="departmentTree" @confirem="cascaderConfirem">
						</cascader>
					</u-form-item>
					<u-form-item label="角色" prop="userName">
						<u-input disabled v-model="userInfo.userRoleNames" type="text" placeholder="角色"
							@click="roleClick"></u-input>
						<z-multi-choose activeColor="red" :selectedData="userInfo.userRoles" idKey="roleCode"
							showKey="roleName" :list="roleList" :show="roleSelectShow" @maskTouch="cancle"
							@sure="rowConfirm" @cancle="rowCancle"></z-multi-choose>
					</u-form-item>
					<u-form-item label="联系电话" prop="userPhone">
						<u-input v-model="userInfo.userPhone"></u-input>
					</u-form-item>
					<u-form-item label="电子邮箱" prop="userEmail">
						<u-input v-model="userInfo.userEmail"></u-input>
					</u-form-item>
					<u-form-item label="身份证" prop="userIdcard">
						<u-input v-model="userInfo.userIdcard"></u-input>
					</u-form-item>
				</u-form>
				<u-button shape="circle" @click="saveOrUpdate">提交</u-button>
			</view>
		</view>
		<footerBar></footerBar>
	</view>
</template>

<script>
	import request from "utils/request.js"
	import cascader from '@/components/yunmiao-cascader/yunmiao-cascader.vue';
	import ldSelect from '@/components/ld-select/ld-select.vue';
	import zMultiChoose from '@/components/z-multi-choose/z-multi-choose.vue';
	export default {
		components: {
			cascader,
			ldSelect
		},
		data() {
			return {
				userInfo: {

				},
				roleSelectShow: false,
				userDepartmentNames: "",
				departmentTree: [],
				roleList: [],
				navbar: {
					title: this.$t('system.user.userEdit'),
					background: {
						backgroundColor: '#001f3f',
						backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					}
				}
			}
		},
		onLoad(data) {
			this.userInfo = JSON.parse(data.userInfo)
			this.getDepartmentTree();
			this.getRoleList();
		},
		methods: {
			loadData() {

			},
			//所部部门
			getDepartmentTree() {
				request({
					url: '/system/department/queryTree',
					method: 'post',
					params: {}
				}).then(response => {
					this.departmentTree = response.data
				})
			},
			//所部部门
			getRoleList() {
				request({
					url: '/system/role/query',
					method: 'post',
					params: {}
				}).then(response => {
					this.roleList = response.data
				})
			},
			roleChange(data1, data2) {
				debugger
			},
			cascaderConfirem(data) {
				this.userInfo.departmentNames = data.select_names.toString()
				this.userInfo.departmentCodes = data.select_ids.toString()
			},
			cascaderClick() {
				var _this = this;
				this.$refs.cascader.show()
			},
			roleClick() {
				this.roleSelectShow = true
			},
			rowConfirm(data) {
				this.userInfo.userRoles = data.idArr.toString()
				this.userInfo.userRoleNames = data.textArr.toString()
				this.roleSelectShow = false
			},
			rowCancle() {
				this.roleSelectShow = true
			},
			// 保存或更新
			saveOrUpdate() {
				var url = '/system/user/insert';
				if (this.userInfo.userId) {
					url = '/system/user/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.userInfo
				}).then(response => {
					this.$u.route({
						url: "/pages/system/user/user-list"
					})
				})
			}
		}
	}
</script>

<style>
	.wrap {
		padding: 40rpx;
	}
</style>
